/**
 * Created by maiseries on 2018/1/5.
 */
import React from 'react'
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity
} from 'react-native'

export default class HorizontalMenuView extends React.Component {

    static propTypes = {
        icon: React.PropTypes.number,
        text: React.PropTypes.string,
        subText: React.PropTypes.string,
        onPress: React.PropTypes.func,
        last: React.PropTypes.bool,
        rightShow: React.PropTypes.bool,
        style: React.PropTypes.number,
        subTextStyle: React.PropTypes.number,
        textStyle: React.PropTypes.number,
    }

    static defaultProps = {
        last: false,
        rightShow: true
    }

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <TouchableOpacity
                activeOpacity={layout.TOUCH_OPACITY_ACTIVE}
                onPress={() => this.props.onPress ? this.props.onPress() : {}}>
                <View style={[base.rowCC, styles.box, this.props.style]}>
                    {
                        this.props.icon ?
                            <View style={styles.iconBox}>
                                <Image style={styles.icon} source={this.props.icon}/>
                            </View> :
                            <View/>
                    }
                    <View style={[styles.textBox,
                        this.props.icon ? {} : styles.textLeftPadding,
                        this.props.last ? {} : styles.bottomLine
                    ]}>
                        <Text allowFontScaling={false} style={[styles.text, this.props.textStyle]}>{this.props.text}</Text>
                        <Text allowFontScaling={false} style={[styles.subText, this.props.subTextStyle]}>{this.props.subText}</Text>
                        {
                            this.props.rightShow ?
                                <Image source={require('../sources/icon_global_go.png')} style={styles.rightIcon}/>:
                                <View/>
                        }
                    </View>
                </View>
            </TouchableOpacity>
        )
    }

}

const styles = StyleSheet.create({
    box: {
        height: layout.height(100)
    },
    iconBox: {
        marginHorizontal: layout.GAP_HORIZONTAL_LARGE
    },
    icon: {
        width: layout.width(50),
        height: layout.height(50),
    },
    textBox: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        alignSelf: 'stretch',
        marginRight: layout.GAP_HORIZONTAL_LARGE,
    },
    textLeftPadding: {
        paddingLeft: layout.GAP_HORIZONTAL_LARGE
    },
    bottomLine: {
        borderBottomWidth: layout.LINE_WIDTH * 2,
        borderBottomColor: layout.MAIN_BORDER_COLOR
    },
    text: {
        flex: 1,
        fontSize: layout.font(34),
        color: layout.MAIN_FONT_COLOR
    },
    subText: {
        fontSize: layout.font(28),
        color: layout.FORM_FONT_COLOR
    },
    rightIcon: {
        marginLeft: layout.GAP_HORIZONTAL_MID,
        width: layout.width(28),
        height: layout.height(28),
    }
})